<style scoped>
#projectDetailPage {
  min-width: 1100px;
}

.projectMenuItem {
  margin: 0 0 10px 0;
}

.projectMenuItemTitle {
  display: inline-block;
  color: #2d8cf099;
}

.ivu-card-body {
  display: flex;
  flex-flow: column;
  flex: 1;
}

.flex1 {
  display: flex;
  flex-flow: column;
  flex: 1;
}

.projectDescriptionContent {
  overflow-y: auto;
  padding: 10px 5px;
  word-break: break-word;
}

.statistics {
  /* width: 40%; */
  /*height: -webkit-fill-available;*/
  display: inline-block;
}

.statistics p {
  margin-top: 5px;
}

.showCount {
  font-size: 30px;
  vertical-align: middle;
  width: 35px;
  margin-left: 15px;
}

.showButton {
  font-size: 20px;
  /* font-weight: 600; */
  cursor: pointer;
  margin: 0 5px;
}

.classSelect {
  font-weight: 600;
  /* text-decoration: underline; */
  border-bottom: solid 2px;
  line-height: 0.9;
}

.changeEditColor:hover {
  background-color: #2db7f5;
  color: white;
}

.changeRemoveColor:hover {
  background-color: #ed4014;
  color: white;
}

.changeInviteColor:hover {
  background-color: #19be6b;
  color: white;
}

.enterWorkspaceColor:hover {
  background-color: #0b83e1;
  color: white;
  /*box-shadow:  0 3.2px 7.2px 0 rgb(0 0 0 / 13%), 0 0.6px 1.8px 0 rgb(0 0 0 / 11%);*/
}

.overEllipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.subProjectDes {
  text-indent: 2em;
  height: 150px;
  display: -webkit-box;
  word-break: break-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 7;
  overflow: hidden;
  white-space: pre-line;
}

.subProjectExtraP {
  display: flex;
  flex-flow: row;
}

.subProjectExtraSpan {
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.subProjectCard .ivu-card-extra {
  top: 10px;
}

.demo-upload-list {
  display: inline-block;
  width: 60px;
  height: 60px;
  text-align: center;
  line-height: 60px;
  border: 1px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  position: relative;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  margin-right: 4px;
}

.demo-upload-list img {
  width: 100%;
  height: 100%;
}

.demo-upload-list-cover {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
}

.demo-upload-list:hover .demo-upload-list-cover {
  display: block;
}

.demo-upload-list-cover i {
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  margin: 0 2px;
}

.uploadAvatar {
  position: relative;
  width: 58px;
  height: 58px;
  top: 0;
  left: 0;
  outline: none;
  background-color: transparent;
  opacity: 0;
}

.uploadBox {
  display: inline-block;
  width: 58px;
  height: 58px;
  line-height: 58px;
  border-width: 0.75px;
  border-style: dashed;
  border-color: lightslategray;
}

.inline_style {
  display: flex;
}

.fileBtn {
  margin: 0px 3px;
}

.fileBtnHoverBlue:hover {
  background-color: #2db7f5;
  color: white;
}

.fileBtnHoverYellow:hover {
  background-color: #f4a942;
  color: white;
}
.ivu-card-body {
  display: inherit;
}

.btnHoverRed:hover {
  background-color: #ed4014;
  color: white;
}

.project_title {
  font-size: 1.5rem;
  color: rgba(214, 109, 0, 0.82);
  display: contents;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media screen and (min-width: 1300px) {
  .title_mw {
    max-width: 600px;
  }
}

@media screen and (max-width: 1299px) {
  .title_mw {
    max-width: 350px;
  }
}
</style>
<template>
  <div id="projectDetailPage" v-cloak>
    <template>
      <div :style="{ height: contentPageCSS + 'px' }" style="margin-top: 0px">
        <div span="2" style="height: inherit; width: 90px; position: absolute">
          <i-menu
            :active-name="activeMenu"
            @on-select="changeMenuItem"
            style="height: inherit; width: fit-content; z-index: 98"
          >
            <menu-item
              name="info"
              class="projectMenuItem"
              style="padding: 14px"
            >
              <Icon
                type="ios-information-circle"
                title="Information"
                size="35"
                style="margin: 0 3px"
              ></Icon>
            </menu-item>
            <menu-item
              name="task"
              class="projectMenuItem"
              style="padding: 14px"
            >
              <Icon
                type="md-calendar"
                title="Tasks"
                size="35"
                style="margin: 0 3px"
              ></Icon>
            </menu-item>
            <menu-item
              name="resource"
              class="projectMenuItem"
              style="padding: 14px"
            >
              <Icon
                type="ios-folder"
                title="Resources"
                size="35"
                style="margin: 0 3px"
              ></Icon>
            </menu-item>
            <menu-item
              name="management"
              class="projectMenuItem"
              style="padding: 14px"
              v-if="userInfo.role == 'admin' || userInfo.role == 'teacher'"
            >
              <Icon
                type="ios-clipboard"
                title="Management"
                size="35"
                style="margin: 0 3px"
              ></Icon>
            </menu-item>
          </i-menu>
        </div>

        <div
          style="margin-left: 70px; height: inherit; min-height: fit-content"
        >
          <div
            v-show="activeMenu == 'info'"
            :style="{ height: contentPageCSS + 'px' }"
          >
            <div style="background: #eee; padding: 10px">
              <Card
                :bordered="false"
                dis-hover
                style="flex-flow: column; min-height: fit-content"
              >
                <div slot="title">
                  <!--                                <h1 slot="title" class="projectMenuItemTitle">Introduction</h1>-->
                  <div
                    style="
                      margin-left: 10px;
                      top: 15px;
                      position: absolute;
                      left: 20px;
                    "
                  >
                    <span
                      ><Icon
                        type="ios-arrow-back"
                        size="28"
                        @click="back2List()"
                        style="
                          cursor: pointer;
                          color: #2d8cf0;
                          vertical-align: sub;
                        "
                    /></span>
                    <strong style="font-size: 1.5rem; margin-left: 10px"
                      >课程介绍</strong
                    >
                    <Divider type="vertical"></Divider>
                  </div>
                  <div
                    style="
                      display: flex;
                      align-items: center;
                      justify-content: center;
                    "
                  >
                    <span class="project_title title_mw">{{
                      projectInfo.name
                    }}</span>
                  </div>
                </div>
                <div slot="extra">
                  <div>
                    <Poptip
                      trigger="hover"
                      content="修改课程信息"
                      placement="left"
                      v-if="
                        userInfo.role == 'admin' || userInfo.role == 'teacher'
                      "
                    >
                      <i-button
                        style="margin: 0 5px"
                        class="changeEditColor"
                        @click="editModelShow()"
                      >
                        <Icon type="ios-create" :size="20"></Icon>
                      </i-button>
                    </Poptip>
                    <Poptip
                      trigger="hover"
                      content="删除课程"
                      placement="left"
                      v-if="
                        userInfo.role == 'admin' || userInfo.role == 'teacher'
                      "
                    >
                      <i-button
                        style="margin: 0 5px"
                        class="changeRemoveColor"
                        @click="deleteProjectShow()"
                      >
                        <Icon type="md-close" :size="20"></Icon>
                      </i-button>
                    </Poptip>
                  </div>
                </div>
                <div class="flex1" style="min-height: fit-content">
                  <Row
                    :gutter="25"
                    style="flex: 1; display: flex; flex-flow: initial"
                  >
                    <i-col span="16" style="display: flex; flex-flow: column">
                      <div
                        style="
                          border: solid 1px #eeeeee;
                          flex: 1;
                          padding: 20px;
                          flex-flow: column;
                          display: flex;
                        "
                      >
                        <Row :gutter="15" style="height: 200px; display: flex">
                          <i-col span="8">
                            <div
                              style="width: 200px; height: 200px"
                              v-if="finishedLoad"
                            >
                              <img
                                :src="dataSever + projectInfo.image"
                                style="height: inherit; width: inherit"
                                v-if="
                                  projectInfo.image != '' &&
                                  projectInfo.image != undefined
                                "
                              />
                              <avatar
                                :username="projectInfo.name.slice(0, 12)"
                                :size="200"
                                :title="projectInfo.name"
                                :rounded="false"
                                v-else
                              ></avatar>
                            </div>
                          </i-col>
                          <i-col span="16" style="align-self: flex-end">
                            <div style="text-align: center">
                              <div class="statistics">
                                <div style="text-align: left; padding: 5px">
                                  <p>
                                    <strong>课程： </strong
                                    ><span id="projectTitle">{{
                                      projectInfo.name
                                    }}</span>
                                  </p>
                                  <p>
                                    <strong>班级人数： </strong
                                    ><span
                                      id="projectPrivacy"
                                      v-if="
                                        finishedLoad &&
                                        projectInfo.members != null
                                      "
                                      >{{ projectInfo.members.length }}</span
                                    ><span id="projectPrivacy" v-else>{{
                                      0
                                    }}</span>
                                  </p>
                                  <p>
                                    <strong>任课老师: </strong
                                    ><span id="projectCategory">{{
                                      showTeachers(projectInfo.teachers)
                                    }}</span>
                                  </p>
                                  <p>
                                    <strong>创建时间： </strong>
                                    {{
                                      projectInfo.createdTime | filterTimeStyle
                                    }}
                                  </p>
                                </div>
                              </div>
                              <div
                                style="
                                  position: absolute;
                                  right: 15px;
                                  bottom: 5px;
                                "
                              >
                                <div>
                                  <Icon type="md-git-branch" size="30"></Icon>
                                  <span class="showCount">{{
                                    classTaskFinished
                                  }}</span>
                                </div>
                                <div>
                                  <Icon type="md-contacts" size="30"></Icon>
                                  <span
                                    class="showCount"
                                    v-if="
                                      finishedLoad &&
                                      projectInfo.members != null
                                    "
                                    >{{ projectInfo.members.length }}</span
                                  >
                                  <span class="showCount" v-else>{{ 0 }}</span>
                                </div>
                              </div>
                            </div>
                          </i-col>
                        </Row>
                        <div class="flex1" style="margin-top: 10px">
                          <div
                            style="
                              flex: 1;
                              padding: 5px;
                              min-height: 100px;
                              border: #e8eaec 0.1px dashed;
                            "
                          >
                            <!-- <h3>课程详情:</h3> -->
                            <div
                              class="projectDescriptionContent"
                              :style="{ height: contentPageCSS - 393 + 'px' }"
                            >
                              <vue-scroll :ops="scrollOps">
                                <Icon
                                  type="logo-buffer"
                                  color="#409EFF"
                                  size="26"
                                  style="margin-left: 10px"
                                />
                                <span style="font-size: 16px; font-weight: 600"
                                  >课程概述</span
                                >
                                <div
                                  id="projectDescription"
                                  style="
                                    white-space: pre-line;
                                    margin-bottom: 20px;
                                    margin-left: 15px;
                                  "
                                >
                                  {{ projectInfo.description }}
                                </div>
                                <Icon
                                  type="md-bookmark"
                                  color="#409EFF"
                                  size="26"
                                  style="margin-left: 10px"
                                />
                                <span style="font-size: 16px; font-weight: 600"
                                  >授课目标</span
                                >
                                <div
                                  id="projectDescription"
                                  style="
                                    white-space: pre-line;
                                    margin-bottom: 20px;
                                    margin-left: 15px;
                                  "
                                >
                                  {{ projectInfo.classTarget }}
                                </div>
                                <Icon
                                  type="md-checkbox"
                                  color="#409EFF"
                                  size="26"
                                  style="margin-left: 10px"
                                />
                                <span style="font-size: 16px; font-weight: 600"
                                  >当前任务</span
                                >
                                <div
                                  id="projectDescription"
                                  style="
                                    white-space: pre-line;
                                    margin-bottom: 20px;
                                    margin-left: 15px;
                                    cursor: pointer;
                                  "
                                  @click="changeMenuItem('task')"
                                >
                                  <div
                                    v-for="(item, index) in taskDoing"
                                    :key="index"
                                  >
                                    *&nbsp;<strong>{{ item.name }}</strong
                                    >&nbsp;&nbsp;&nbsp;截至时间：{{
                                      item.endTime | deadlineFilter
                                    }}
                                  </div>
                                </div>
                              </vue-scroll>
                            </div>
                          </div>
                        </div>
                      </div>
                    </i-col>
                    <i-col span="8" style="display: flex; flex-flow: column">
                      <div style="border: solid 1px #eeeeee" class="flex1">
                        <Card :bordered="false" dis-hover>
                          <div
                            slot="title"
                            style="
                              display: flex;
                              align-items: center;
                              height: 25px;
                            "
                          >
                            <span
                              @click="showClassMemberOrComment('member')"
                              class="showButton classSelect"
                              id="classMember"
                              >班级成员</span
                            >
                            <Icon
                              type="ios-eye"
                              size="30"
                              title="查看用户头像"
                              v-if="showAvatar"
                              @click="changeShowAvatar"
                            />
                            <Icon
                              type="ios-eye-off"
                              size="30"
                              title="隐藏用户头像"
                              v-if="!showAvatar"
                              @click="changeShowAvatar"
                            />
                            <Divider type="vertical"></Divider>
                            <!-- <span
                              @click="showClassMemberOrComment('comment')"
                              class="showButton"
                              id="classComment"
                              >课程评论</span
                            > -->
                            <div
                              style="align-items: flex-end; margin-left: auto"
                            >
                              <Poptip
                                trigger="hover"
                                content="添加成员"
                                v-if="
                                  userInfo.role == 'admin' ||
                                  userInfo.role == 'teacher'
                                "
                                placement="left"
                              >
                                <Button
                                  class="changeInviteColor"
                                  @click="inviteModalShow()"
                                >
                                  <Icon type="md-person-add" :size="16"></Icon>
                                </Button>
                              </Poptip>
                              <Poptip
                                trigger="hover"
                                content="移除成员"
                                v-if="
                                  userInfo.role == 'admin' ||
                                  userInfo.role == 'teacher'
                                "
                                placement="left"
                              >
                                <Button
                                  style="margin-left: 5px"
                                  class="changeRemoveColor"
                                  @click="deleteMemberModelShow"
                                >
                                  <Icon
                                    type="md-remove-circle"
                                    :size="16"
                                  ></Icon>
                                </Button>
                              </Poptip>
                            </div>
                          </div>

                          <div
                            :style="{ height: contentPageCSS - 200 + 'px' }"
                            style="overflow-y: auto"
                          >
                            <vue-scroll :ops="scrollOps">
                              <Card
                                v-if="participants.length <= 0"
                                style="
                                  margin-top: 25px;
                                  cursor: pointer;
                                  border: transparent;
                                "
                                dis-hover
                              >
                                <div
                                  style="display: flex; justify-content: center"
                                >
                                  <Icon
                                    type="md-alert"
                                    size="40"
                                    color="gray"
                                  ></Icon>
                                </div>
                                <br />
                                <div
                                  style="display: flex; justify-content: center"
                                >
                                  <h2 style="text-align: center; width: 50%">
                                    没有成员参加
                                  </h2>
                                </div>
                                <br />
                                <div
                                  style="display: flex; justify-content: center"
                                >
                                  <h4
                                    style="
                                      text-align: center;
                                      width: 80%;
                                      color: lightblue;
                                    "
                                  >
                                    你可以通过右上角邀请按钮，快速添加成员。
                                  </h4>
                                </div>
                              </Card>
                              <Card
                                v-for="member in participants"
                                :key="member.userId"
                                style="margin-top: 5px; cursor: pointer"
                              >
                                <div :title="member.userId" v-if="showAvatar">
                                  <img
                                    :src="avatarUrl(member.avatar)"
                                    v-if="
                                      member.avatar != null &&
                                      member.avatar != '' &&
                                      member.avatar != undefined
                                    "
                                    :title="member.name"
                                    style="
                                      vertical-align: middle;
                                      width: 40px;
                                      height: 40px;
                                    "
                                  />
                                  <avatar
                                    v-else
                                    :username="member.name"
                                    :size="40"
                                    style="vertical-align: middle"
                                    :title="member.name"
                                  />
                                  <h3
                                    class="overEllipsis"
                                    style="
                                      position: absolute;
                                      left: 70px;
                                      top: 25px;
                                    "
                                  >
                                    {{ member.name }}
                                  </h3>
                                </div>
                                <div :title="member.userId" v-if="!showAvatar">
                                  <h3 class="overEllipsis">
                                    {{ member.name }}
                                  </h3>
                                </div>
                              </Card>
                            </vue-scroll>
                          </div>
                        </Card>
                      </div>
                    </i-col>
                  </Row>
                </div>
              </Card>
            </div>
          </div>
          <div
            v-if="activeMenu == 'resource'"
            :style="{ height: contentPageCSS + 'px' }"
          >
            <div style="background: #eee; padding: 10px">
              <Card
                :bordered="false"
                dis-hover
                style="min-height: 565px; min-height: fit-content"
              >
                <!--                            <h1 slot="title" class="projectMenuItemTitle">Resources</h1>-->
                <div slot="title">
                  <div
                    style="
                      margin-left: 10px;
                      top: 15px;
                      position: absolute;
                      left: 20px;
                    "
                  >
                    <span
                      ><Icon
                        type="ios-arrow-back"
                        size="28"
                        @click="back2List()"
                        style="
                          cursor: pointer;
                          color: #2d8cf0;
                          vertical-align: sub;
                        "
                    /></span>
                    <strong style="font-size: 1.5rem; margin-left: 10px"
                      >资源管理</strong
                    >
                    <Divider type="vertical"></Divider>
                  </div>
                  <div
                    style="
                      display: flex;
                      align-items: center;
                      justify-content: center;
                    "
                  >
                    <span class="project_title title_mw">{{
                      projectInfo.name
                    }}</span>
                  </div>
                </div>
                <div slot="extra">
                  <!-- <Tooltip 
                    content="前往 资源库"
                    placement="left"
                    class="fileBtn"
                  >
                    <i-button
                      @click="goResourceCenter"
                      class="fileBtnHoverYellow"
                    >
                      <Icon type="ios-albums" size="20"></Icon>
                    </i-button>
                  </Tooltip> -->
                </div>
                <div :style="{ height: contentPageCSS - 105 + 'px' }">
                  <folder-tree
                    :activityInfo="projectInfo"
                    ref="resTree"
                  ></folder-tree>
                </div>
              </Card>
            </div>
          </div>
          <div
            v-if="activeMenu == 'task'"
            style="height: inherit; min-height: fit-content"
          >
            <div style="background: #eee; padding: 10px">
              <Card
                :bordered="false"
                dis-hover
                style="min-height: 565px; min-height: fit-content"
              >
                <!--                            <h1 slot="title" class="projectMenuItemTitle">Task assignment</h1>-->
                <div slot="title">
                  <div
                    style="
                      margin-left: 10px;
                      top: 15px;
                      position: absolute;
                      left: 20px;
                    "
                  >
                    <span
                      ><Icon
                        type="ios-arrow-back"
                        size="28"
                        @click="back2List()"
                        style="
                          cursor: pointer;
                          color: #2d8cf0;
                          vertical-align: sub;
                        "
                    /></span>
                    <strong style="font-size: 1.5rem; margin-left: 10px"
                      >课程进度</strong
                    >
                    <Divider type="vertical"></Divider>
                    <!--                                    <strong style="font-size:1rem;">Task assignment</strong>-->
                  </div>
                  <div
                    style="
                      display: flex;
                      align-items: center;
                      justify-content: center;
                    "
                  >
                    <span class="project_title title_mw">{{
                      projectInfo.name
                    }}</span>
                  </div>
                </div>

                <div :style="{ height: contentPageCSS - 105 + 'px' }">
                  <task-manager
                    :classTaskList="classTaskList"
                    @turn2Folder="turn2Folder"
                    ref="task"
                  ></task-manager>
                </div>
              </Card>
            </div>
          </div>
          <div
            v-if="activeMenu == 'management'"
            :style="{ height: contentPageCSS + 'px' }"
          >
            <div style="background: #eee; padding: 10px">
              <Card
                :bordered="false"
                dis-hover
                style="min-height: 565px; min-height: fit-content"
              >
                <!--                            <h1 slot="title" class="projectMenuItemTitle">Resources</h1>-->
                <div slot="title">
                  <div
                    style="
                      margin-left: 10px;
                      top: 15px;
                      position: absolute;
                      left: 20px;
                    "
                  >
                    <span
                      ><Icon
                        type="ios-arrow-back"
                        size="28"
                        @click="back2List()"
                        style="
                          cursor: pointer;
                          color: #2d8cf0;
                          vertical-align: sub;
                        "
                    /></span>
                    <strong style="font-size: 1.5rem; margin-left: 10px"
                      >课程管理</strong
                    >
                    <Divider type="vertical"></Divider>
                  </div>
                  <div
                    style="
                      display: flex;
                      align-items: center;
                      justify-content: center;
                    "
                  >
                    <span class="project_title title_mw">{{
                      projectInfo.name
                    }}</span>
                  </div>
                </div>
                <div :style="{ height: contentPageCSS - 105 + 'px' }">
                  <class-manage
                    :contentPageCSS="contentPageCSS"
                    ref="resourceTree"
                  ></class-manage>
                </div>
              </Card>
            </div>
          </div>
          <Modal
            v-model="editProjectModal"
            title="修改课程信息"
            :mask-closable="false"
            width="900"
          >
            <div>
              <i-form
                ref="projectEditForm"
                :model="projectEditForm"
                :rules="editProjectFormRuleValidate"
                :label-width="100"
              >
                <Form-item label="课程名称" prop="title">
                  <i-input
                    v-model="projectEditForm.name"
                    placeholder="Enter something..."
                  ></i-input>
                </Form-item>
                <Form-item label="课程概述" prop="description">
                  <i-input v-model="projectEditForm.description"></i-input>
                </Form-item>
                <Form-item label="授课目标" prop="classTarget">
                  <i-input v-model="projectEditForm.classTarget"></i-input>
                </Form-item>
                <Form-item label="授课老师" prop="teachers">
                  <i-input v-model="projectEditForm.teachers"></i-input>
                </Form-item>
                <Form-item label="课程权限" prop="privacy">
                  <Radio-group v-model="projectEditForm.privacy">
                    <Radio
                      label="public"
                      title="Other users can find the group and see who has membership."
                    ></Radio>
                    <Radio
                      label="private"
                      title="Other users can not find this group."
                    ></Radio>
                  </Radio-group>
                </Form-item>
                <Form-item prop="image" label="课程封面" :label-width="100">
                  <div class="inline_style">
                    <div class="demo-upload-list" v-show="pictureUrl != ''">
                      <div>
                        <img :src="img" />
                        <div class="demo-upload-list-cover">
                          <Icon
                            type="ios-eye-outline"
                            @click.native="handleView()"
                          ></Icon>
                          <Icon
                            type="ios-trash-outline"
                            @click.native="handleRemove()"
                          ></Icon>
                        </div>
                      </div>
                    </div>
                    <div class="uploadBox">
                      <Icon
                        type="ios-camera"
                        size="20"
                        style="position: absolute; margin: 18px"
                      ></Icon>
                      <input
                        @change="uploadPhoto($event)"
                        type="file"
                        class="uploadAvatar"
                        accept="image/*"
                        id="choosePicture"
                      />
                    </div>
                    <Modal title="View image" v-model="visible">
                      <img :src="img" v-if="visible" style="width: 100%" />
                    </Modal>
                  </div>
                </Form-item>
              </i-form>
            </div>
            <div slot="footer" style="display: inline-block">
              <i-button
                type="primary"
                @click="editProjectSubmit('projectEditForm')"
                style="float: right"
                >确定
              </i-button>
              <i-button
                @click="closeEditModel()"
                style="float: right; margin-right: 15px"
                >取消</i-button
              >
            </div>
          </Modal>
          <Modal
            v-model="removeProjectModal"
            title="删除课程"
            @on-ok="deleteProject"
            ok-text="确定"
            cancel-text="取消"
          >
            <p style="font-size: 28px">Do you sure to delete this project?</p>
          </Modal>
          <Modal
            v-model="inviteModal"
            title="添加成员"
            :mask-closable="false"
            width="700"
          >
            <Form ref="emailInfo" :model="emailInfo" :label-width="100" inline>
              <FormItem label="添加类型:" style="margin-left: 10px">
                <Row>
                  <Col span="24">
                    <RadioGroup v-model="emailInfo.type">
                      <Radio label="excel">Excel快速导入</Radio>
                      <Radio label="NJNU">南师大标准格式</Radio>
                      <Radio label="userId">学号添加</Radio>
                    </RadioGroup></Col
                  >
                </Row>
              </FormItem>
              <Form-item
                label="成员信息:"
                prop="memberInfo"
                style="margin-left: 10px; width: 100%"
              >
                <Row>
                  <Col span="19">
                    <Input
                      v-model="emailInfo.userIds"
                      placeholder="请输入成员学号（多学号间使用,分割）"
                      style="width: 100%"
                      v-if="emailInfo.type == 'userId'"
                    />
                    <Input
                      v-model="emailInfo.fileName"
                      placeholder="请上传成员信息excel"
                      style="width: 100%"
                      v-if="
                        emailInfo.type == 'excel' || emailInfo.type == 'NJNU'
                      "
                      :readonly="
                        emailInfo.type == 'excel' || emailInfo.type == 'NJNU'
                          ? true
                          : false
                      "
                    />
                  </Col>
                  <Col span="4">
                    <Upload
                      :disabled="
                        emailInfo.type != 'excel' && emailInfo.type != 'NJNU'
                      "
                      type="select"
                      :before-upload="gatherFile"
                      action="-"
                    >
                      <Button
                        :disabled="
                          emailInfo.type != 'excel' && emailInfo.type != 'NJNU'
                        "
                        >上传</Button
                      >
                    </Upload>
                  </Col>
                </Row>
              </Form-item>
              <h3 style="margin-left: 50px" v-if="emailInfo.type == 'excel'">
                Excel快速导入模板:<a @click="downloadExcel">点击下载</a>
              </h3>
              <h3 style="margin-left: 50px" v-if="emailInfo.type == 'NJNU'">
                南师大标准格式Excel模板:<a @click="downloadNJNUExcel"
                  >点击下载</a
                >
              </h3>
            </Form>
            <div slot="footer" style="display: inline-block">
              <i-button
                type="primary"
                @click="invite('emailInfo')"
                style="float: right"
                >确认</i-button
              >
              <i-button
                @click="closeInviteModel()"
                style="float: right; margin-right: 15px"
                >取消</i-button
              >
            </div>
          </Modal>
          <Modal
            v-model="deleteMemberModel"
            title="移除成员"
            :mask-closable="false"
            width="600"
          >
            <CheckboxGroup v-model="removeMemberName">
            
              <span
                v-for="member in participants"
                :key="member.name"
               
              >
                <Checkbox
                  :label="member.name"
                  style="margin-right: 30px"
                  v-if="member.userId != userInfo.userId"
                 @click.native.stop="changeRemoveMemberId($event,member.userId)"
                >
                </Checkbox>
              </span>
            </CheckboxGroup>
            <div slot="footer" style="display: inline-block">
              <i-button
                type="primary"
                @click="removeMembersAlertShow()"
                style="float: right"
                >确定
              </i-button>
              <i-button
                @click="closeDeleteMembersModel()"
                style="float: right; margin-right: 15px"
                >取消
              </i-button>
            </div>
          </Modal>
          <Modal
            v-model="removeMemberAlertModel"
            title="移除成员确认"
            @on-ok="removeMember"
            @on-cancel="handleCancelremoveMember"
            ok-text="确定"
            cancel-text="取消"
          >
            <p style="font-size: 18px">
              确定要从此课程中删除成员 {{ removeMemberName.toString() }} 吗？
            </p>
          </Modal>
          <Modal v-model="applyJoinModal" title="Apply to join the project">
            <i-form
              ref="applyValidate"
              :model="applyValidate"
              :rules="applyRuleValidate"
              :label-width="80"
            >
              <form-item label="Reason" prop="reason">
                <i-input
                  v-model="applyValidate.reason"
                  type="textarea"
                  :rows="4"
                  placeholder="Enter The Reason For Application ..."
                ></i-input>
              </form-item>
            </i-form>
            <div slot="footer">
              <i-button @click="applyJoinModal = false">Cancel</i-button>
              <i-button type="success" @click="joinApply('applyValidate')"
                >Apply</i-button
              >
            </div>
          </Modal>
          <Modal v-model="resetProjectTypeNotice" title="Reset workspace type">
            <h2>Please confirm that all subprojects have been deleted.</h2>
            <div slot="footer">
              <i-button type="primary" @click="resetProjectTypeNotice = false"
                >OK</i-button
              >
            </div>
          </Modal>
          <Modal v-model="resetProjectTypeModel" title="Reset workspace type">
            <h2>Are you sure to reset the workspace type?</h2>
            <div slot="footer">
              <i-button type="primary" @click="resetProjectType()"
                >Submit</i-button
              >
            </div>
          </Modal>
        </div>
      </div>
    </template>
    <div th:replace="navigation::commonFooter"></div>
  </div>
</template>
<script>
import Avatar from "vue-avatar";
import taskManager from "./utils/taskManger.vue";
import folderTree from "../resources/folderTree.vue";
import classManage from "./utils/classManagement.vue";
import { get, post, del, put } from "@/axios";
export default {
  components: {
    Avatar,
    taskManager,
    folderTree,
    classManage,
  },
  data() {
    return {
      contentPageCSS: 0,
      scrollOps: {
        bar: {
          background: "#808695",
        },
      },
      tokenStr: "",
      activeMenu: "info",
      //user
      userInfo: {},
      userRole: "visitor",
      creatorInfo: {},
      participants: [],
      // project
      classId: "",
      classTaskList: [],
      projectInfo: {},
      editProjectModal: false,
      projectEditForm: {
        description: "",
        classTarget: "",
        name: "",
        privacy: "",
        teachers: "",
      },
      editProjectFormRuleValidate: {
        name: [
          {
            required: true,
            message: "The name cannot be empty and no more than 60 characters",
            trigger: "blur",
            max: 60,
          },
        ],
        description: [
          {
            required: true,
            message:
              "The description cannot be empty and no more than 360 characters",
            trigger: "blur",
            max: 500,
          },
        ],
        classTarget: [
          {
            required: true,
            message:
              "The classTarget cannot be empty and no more than 360 characters",
            trigger: "blur",
            max: 500,
          },
        ],
        teachers: [
          {
            required: true,
            message:
              "The teachers cannot be empty and no more than 360 characters",
            trigger: "blur",
            max: 100,
          },
        ],
        privacy: [
          {
            required: true,
            message: "The project privacy cannot be empty",
            trigger: "blur",
          },
        ],
      },
      pictureUrl: "",
      inputTag: "",
      visible: false,
      removeProjectModal: false,
      inviteModal: false,
      emailInfo: {
        type: "excel",
        file: null,
        fileName: "",
        userIds: "",
      },

      prompt: [],
      deleteMemberModel: false,
      removeMemberName: [],
      removeMemberAlertModel: false,
      removeMemberId: [],
      newManagerId: "",
      //加入项目
      applyProjectInfo: {},
      applyValidate: {
        reason: "",
      },
      applyRuleValidate: {
        reason: [
          {
            required: true,
            message: "Please enter the reason for application",
            trigger: "blur",
          },
          {
            type: "string",
            min: 5,
            message: "The reason no less than 10 characters",
            trigger: "blur",
          },
        ],
      },
      applyJoinModal: false,
      haveApplied: false,
      resetProjectTypeNotice: false,
      resetProjectTypeModel: false,
      // tool
      workPanels: [],
      dataSever: "",
      finishedLoad: false,
      classTaskFinished: 0,
      taskDoing: [],
      imageFile: null,
      img: "",
      showAvatar: false,
    };
  },
  created() {
    this.urlWithoutInfo();
    // this.roleIdentity();
  },
  mounted() {
    this.userInfo = JSON.parse(localStorage.getItem("userInfo"));
    this.dataSever = this.$store.getters.dataSever;
    this.classId = window.location.href
      .split("/classInfo?id=")[1]
      .split("&content")[0];
    this.userEnter();
    this.resizeContent();
    this.changeMenuByUrl();
  },
  methods: {
    changeShowAvatar() {
      this.showAvatar = !this.showAvatar;
    },
    showTeachers(value) {
      let teachersList = value.toString().split(",");
      let res = "";
      for (let i = 0; i < teachersList.length; i++) {
        if (res == "") {
          res += teachersList[i].split("(")[0];
        } else {
          res += "," + teachersList[i].split("(")[0];
        }
      }
      return res;
    },
    urlWithoutInfo() {
      if (window.location.href.indexOf("/classInfo?id=") == -1) {
        this.$router.go(-1);
      } else if (
        window.location.href.split("/classInfo?id=")[1].split("&content")[0] ==
        ""
      ) {
        this.$router.go(-1);
      }
    },
    roleIdentity() {
      if (this.userInfo.userId == "admin") {
        this.userInfo.role = "admin";
      } else if (
        this.userInfo.role == "teacher" &&
        this.projectInfo.teachers.indexOf(this.userInfo.userId) >= 0
      ) {
        this.userInfo.role = "teacher";
      } else {
        this.userInfo.role = "student";
      }
    },
    // detailPermissionIdentity(permission, role, operation) {
    //   return this.userRoleApi.permissionIdentity(
    //     JSON.parse(permission),
    //     role,
    //     operation
    //   );
    // },
    changeMenuByUrl() {
      var content = this.getURLParameter("content");
      if (content != null) {
        var array = ["info", "task", "resource", "management"];
        if (array.includes(content)) {
          this.activeMenu = content;
        }
      }
    },
    getURLParameter(name) {
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
      var r = window.location.search.substr(1).match(reg);
      if (r != null) {
        return unescape(r[2]);
      }
      return null;
    },
    userEnter() {
      if (!this.$store.getters.userState) {
        this.$router.push({ name: "home" });
      } else {
        this.getClassInfo();
        // this.getClassRes();
        // this.getClassTask();
        // setTimeout(() => {
        //   this.getClassMember();
        // }, 1500);
      }
    },
    downloadExcel() {
      // 从数据库中拿到模板文件的id
      try {
        window.open(
          "/visualResourceLibrary/res/down/f674c85c-3544-4ba0-9a25-0315fc86c7b4"
        );
      } catch (e) {
        console.log(e);
      }
    },
    downloadNJNUExcel() {
      // 从数据库中拿到模板文件的id
      try {
        window.open(
          "/visualResourceLibrary/res/down/e620b618-b64a-4ca7-b20e-64768c09a2a4"
        );
      } catch (e) {
        console.log(e);
      }
    },
    async getClassInfo() {
      try {
        let res = await get("/visualResourceLibrary/class/enter/" + this.classId);
        this.projectInfo = res.data.data.classInfo;
        this.finishedLoad = true;
        this.roleIdentity();
        this.classTaskList = res.data.data.classTask;
        for (let i = 0; i < this.classTaskList.length; i++) {
          let now = new Date();
          let start = new Date(this.classTaskList[i].startTime);
          let end = new Date(this.classTaskList[i].endTime);
          if (now >= start && now <= end) {
            // doing
            this.taskDoing.push(this.classTaskList[i]);
          }
        }
        this.classTaskFinished = res.data.data.classTask.length;
        this.participants = res.data.data.classMember;
      } catch (e) {
        this.$Message.error("修改失败");
        console.log(e);
      }
    },
    async getClassTask() {
      try {
        let res = await get(
          "/visualResourceLibrary/class/task/" + this.classId
        );
        this.classTaskList = res.data.data;
        for (let i = 0; i < this.classTaskList.length; i++) {
          let now = new Date();
          let start = new Date(this.classTaskList[i].startTime);
          let end = new Date(this.classTaskList[i].endTime);
          if (now >= start && now <= end) {
            // doing
            this.taskDoing.push(this.classTaskList[i]);
          }
        }
        this.classTaskFinished = res.data.data.length;
        // console.log(res);
      } catch (e) {
        this.$Message.error("修改失败");
        console.log(e);
      }
    },
    async getClassMember() {
      if (
        this.projectInfo.members != null &&
        this.projectInfo.members != undefined
      ) {
        try {
          let res = await get(
            "/visualResourceLibrary/class/member/" +
              this.projectInfo.members.toString()
          );
          // this.classTaskList = res.data.data;
          this.participants = res.data.data;
          // console.log(res);
        } catch (e) {
          this.$Message.error("修改失败");
          console.log(e);
        }
      }
    },
    resizeContent() {
      if (window.innerHeight > 735) {
        this.contentPageCSS = window.innerHeight - 120;
      } else {
        this.contentPageCSS = 610;
      }
    },
    changeMenuItem(name) {
      if (name == this.activeMenu) {
        location.reload();
      } else {
        this.activeMenu = name;
        window.history.replaceState(
          null,
          null,
          "/visualCoursePlatform/classInfo?id=" +
            this.projectInfo.classId +
            "&content=" +
            name
        );
      }
    },
    showClassMemberOrComment(type) {
      // console.log(type);
      let domCM = document.getElementById("classMember");
      let domCC = document.getElementById("classComment");
      if (type == "member") {
        domCM.className = "showButton classSelect";
        domCC.className = "showButton";
      } else if (type == "comment") {
        domCM.className = "showButton";
        domCC.className = "showButton classSelect";
      }
    },
    editModelShow() {
      this.editProjectModal = true;
      let editProjectInfo = this.projectInfo;
      this.projectEditForm.name = editProjectInfo.name;
      this.projectEditForm.description = editProjectInfo.description;
      this.projectEditForm.classTarget = editProjectInfo.classTarget;
      this.projectEditForm.privacy = editProjectInfo.privacy;
      this.projectEditForm.teachers = editProjectInfo.teachers;
      this.pictureUrl = editProjectInfo.image;
      this.img = this.dataSever + this.pictureUrl;
      this.imageFile = null;
    },
    closeEditModel() {
      this.editProjectModal = false;
    },
    uploadPhoto(e) {
      // 利用fileReader对象获取file
      var file = e.target.files[0];
      var filesize = file.size;
      // 2,621,440   2M
      if (filesize > 2101440) {
        // 图片大于2MB
        this.$Message.error("size > 2MB");
      } else {
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = (e) => {
          this.img = e.target.result;
          this.pictureUrl = e.target.result;
          this.imageFile = file;
        };
      }
    },
    handleView() {
      this.visible = true;
    },
    handleRemove() {
      this.img = "";
      this.pictureUrl = "";
      this.imageFile = null;
    },
    gatherFile(file) {
      this.emailInfo.file = file;
      this.emailInfo.fileName = file.name;
      // console.log(file);
      return false;
    },
    addTag(tag) {
      if (tag != "") {
        this.projectEditForm.editTags.push(tag);
      }
      this.inputTag = "";
    },
    deleteTag(index) {
      this.projectEditForm.editTags.splice(index, 1);
    },
    editProjectSubmit(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          this.commitEditForm();
        } else {
          this.$Message.warning("please check your form again!");
        }
      });
    },
    async commitEditForm() {
      let formData = new FormData();
      if (this.imageFile != null) {
        // 无更改，则不改变原头像
        formData.append("image", this.imageFile);
      }
      formData.append("id", this.projectInfo.id);
      formData.append("name", this.projectEditForm.name);
      formData.append("privacy", this.projectEditForm.privacy);
      formData.append("description", this.projectEditForm.description);
      formData.append("classTarget", this.projectEditForm.classTarget);
      formData.append("teachers", this.projectEditForm.teachers);
      try {
        let res = await post("/visualResourceLibrary/class/update", formData);
        // console.log(res);
        this.$Notice.success({
          title: "Success",
          desc: "修改成功",
        });
        location.reload();
      } catch (e) {
        this.$Message.error("修改失败");
        console.log(e);
      }
    },
    deleteProjectShow() {
      this.removeProjectModal = true;
    },
    async deleteProject() {
      try {
        let res = await del(
          "/visualResourceLibrary/class/" + this.projectInfo.id
        );
        // console.log(res);
        this.$Notice.success({
          title: "Success",
          desc: "删除成功",
        });
        // window.location.href = "/visualCoursePlatform/classList";
        this.$router.replace({ name: "classList" });
      } catch (e) {
        this.$Message.error("修改失败");
        console.log(e);
      }
    },
    inviteModalShow() {
      this.inviteModal = true;
    },
    async invite(name) {
      let formData = new FormData();
      formData.append("type", this.emailInfo.type);
      formData.append("classId", this.classId);
      if (this.emailInfo.type == "excel" || this.emailInfo.type == "NJNU") {
        formData.append("file", this.emailInfo.file);
      } else {
        formData.append("userIds", this.emailInfo.userIds);
      }
      try {
        let res = await post("/visualResourceLibrary/class/member", formData);
        this.projectInfo = res.data.data;
        this.getClassMember();
        this.inviteModal = false;
        // console.log(res);
      } catch (e) {
        this.$Message.error("修改失败");
        console.log(e);
      }
    },
    closeInviteModel() {
      this.inviteModal = false;
    },
    emialAutoFill(value) {
      this.prompt =
        !value || value.indexOf("@") >= 0
          ? []
          : [
              value + "@gmail.com",
              value + "@sina.com",
              value + "@163.com",
              value + "@126.com",
              value + "@qq.com",
            ];
    },
    deleteMemberModelShow() {
      this.removeMemberId = [];
      this.removeMemberName = [];
      this.deleteMemberModel = true;
    },
    closeDeleteMembersModel() {
      // console.log('关闭对话框')
      this.removeMemberId = [];
      this.removeMemberName = [];
      this.deleteMemberModel = false;
    },
    changeRemoveMemberId(event,id) {

      // console.log(id);
      // console.log(this.removeMemberId);
      // console.log(event.target.tagName);
      if (event.target.tagName === 'SPAN') return;
      if (event.target.tagName === 'LABEL') return;
      if (this.removeMemberId.toString().indexOf(id) != -1) {
        // console.log('11')
        for (let i = 0; i < this.removeMemberId.length; i++) {
          if (this.removeMemberId[i] == id) {
            this.removeMemberId.splice(i, 1);
          }
        }
      } else {
        // console.log('22')
        this.removeMemberId.push(id);
      }
    },
    handleCancelremoveMember() {
      // console.log(this.removeMemberId);
      // console.log(this.removeMemberName);
      this.removeMemberId = [];
      this.removeMemberName = [];
    },
    removeMembersAlertShow() {
      console.log(this.removeMemberId);
      if (this.removeMemberId.length > 0) {
        this.deleteMemberModel = false;
        this.removeMemberAlertModel = true;
      } else {
        this.$Message.warning("There are no member be selected.");
      }
    },
    async removeMember() {
      console.log(this.removeMemberId);
      try {
        let res = await del(
          "/visualResourceLibrary/class/member/" +
            this.classId +
            "/" +
            this.removeMemberId.toString()
        );
        // console.log(res);
        this.deleteMemberModel = false;
        this.$Notice.success({
          title: "成功",
          desc: "所选择的成员已经从此课程中移除",
        });
        for (let i = 0; i < this.participants.length; i++) {
          for (let j = 0; j < this.removeMemberId.length; j++) {
            if (this.participants[i].userId == this.removeMemberId[j]) {
              this.participants.splice(i, 1);
            }
          }
        }
        this.removeMemberId = [];
      } catch (e) {
        this.$Message.error("修改失败");
        console.log(e);
      }
    },
    goResourceCenter() {
      // window.location.href = "/publicResource";
      this.$router.push({ name: "publicResource" });
    },
    joinApply(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          if (
            this.haveApplied == true &&
            this.applyProjectInfo.aid == sessionStorage.getItem("applyId")
          ) {
            return;
          } else {
            let userDetail = this.userInfo;
            let description =
              "User " +
              userDetail.name +
              " apply to join your project: " +
              this.applyProjectInfo.name +
              " ." +
              " The reason for application is: " +
              this.applyValidate.reason;
            for (var i = 0; i < this.applyProjectInfo.members.length; i++) {
              if (this.applyProjectInfo.members[i].role == "manager") {
                let managerId = this.applyProjectInfo.members[i].userId;
                let joinForm = {};
                joinForm["recipientId"] = managerId;
                joinForm["type"] = "apply";
                joinForm["content"] = {
                  title: "Project application",
                  activityId: this.applyProjectInfo.aid,
                  activityName: this.applyProjectInfo.name,
                  activityLevel: this.applyProjectInfo.level,
                  userEmail: userDetail.email,
                  userName: userDetail.name,
                  userId: userDetail.userId,
                  description: description,
                  approve: "unknow",
                };

                axios
                  .post("/GeoProblemSolving/notice/save", joinForm)
                  .then((res) => {
                    if (res.data == "Success") {
                      this.$Notice.open({
                        title: "Apply Successfully",
                        desc: "The application has been sent to managers of the project.",
                      });
                      this.$refs.navigationEl.sendMessage({
                        type: "Notice",
                        receiver: managerId,
                      });
                      this.applyJoinModal = false;
                      this.haveApplied = true;
                    } else {
                      this.$Notice.open({
                        desc: "Apply failed.",
                      });
                    }
                  })
                  .catch((err) => {
                    console.log("申请失败的原因是：" + err.data);
                  });
              }
            }
            sessionStorage.setItem("applyId", this.applyProjectInfo.aid);

            let emailObject = {
              mailTitle: "Project application",
              mailContent:
                description +
                "<br>" +
                "You can click this url and enter the site to process this application: " +
                "http://" +
                window.location.host +
                "/GeoProblemSolving/home",
            };
            axios
              .post(
                "/GeoProblemSolving/project/" +
                  this.applyProjectInfo.aid +
                  "/application",
                emailObject
              )
              .then((res) => {
                if (res.data.code !== 0) {
                  console.log(res.data.msg);
                }
              })
              .catch((err) => {
                console.log(err.data);
              });
          }
        } else {
          this.$Message.error("Fail!");
        }
      });
    },
    showToolPanel(url, title) {
      var that = this;
      var panel = jsPanel.create({
        container: "#pageBody",
        theme: "success",
        headerTitle: title,
        footerToolbar: '<p style="height:10px"></p>',
        contentSize: "800 400",
        content: url,
        disableOnMaximized: true,
        dragit: {
          containment: 5,
        },
        closeOnEscape: true,
        onbeforeclose: function (panel, status, closedByUser) {
          return confirm("Please confirm your edit has been saved?");
        },
        onclosed: function (panel, status, closedByUser) {
          var index = that.workPanels.indexOf(this);
          that.workPanels.splice(index, 1);
        },
      });
      $(".jsPanel-content").css("font-size", "0"); //防止出现滚动条
      $(".jsPanel").css("position", "fixed");
      this.workPanels.push(panel);
    },
    back2List() {
      this.$router.push("classList");
    },
    turn2Folder(folderId) {
      this.changeMenuItem("resource");
      this.$nextTick(() => {
        this.$refs.resTree.turn2Folder(folderId);
      });
    },
    avatarUrl: function (value) {
      return this.$store.getters.dataSever + value;
    },
  },
  computed: {},
  filters: {
    filterSizeType(value) {
      if (value === 0) return "0 B";
      let k = 1024;
      let sizes = ["B", "KB", "MB", "GB"];
      let i = Math.floor(Math.log(value) / Math.log(k));
      return (value / Math.pow(k, i)).toPrecision(4) + " " + sizes[i];
    },
    filterTimeStyle(str) {
      if (str != null) {
        let result = str.split(".")[0];
        // return result.replace("T", " ");
        return result.split("T")[0];
      }
    },
    deadlineFilter(str) {
      var date = new Date(str);
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      var d = date.getDate();
      d = d < 10 ? "0" + d : d;
      const time = y + "-" + m + "-" + d + " 23:59:59";
      return time;
    },
  },
};
</script>
